import { cva } from "class-variance-authority";
import { View } from "@tarojs/components";
import ByIcon from "../ui/ByIcon";
import ByText from "../ui/ByText";

import ByTag from "../ui/ByTag";

type ReviewProgressProps = {
  text?: string;
  tail?: boolean;
  status?: "success" | "error" | "active" | "default";

  tag?: boolean;
};

const cls = cva("mr-1", {
  variants: {
    status: {
      default: "text-third",
      error: "text-error",
      success: "text-success",
      active: "text-primary",
    },
  },
  defaultVariants: {
    status: "default",
  },
});

const TagStatusMap = {
  default: "info",
  error: "error",
  success: "success",
  active: "primary",
} as const;

export default ({
  text,
  tail,
  status = "default",
  tag,
}: ReviewProgressProps) => {
  return (
    <View className={`inline-flex items-center`}>
      {tag ? (
        <ByTag rounded={false} type={TagStatusMap[status]}>
          {text}
        </ByTag>
      ) : (
        <>
          <ByIcon
            name={status ? "CheckedFill" : "UnChecked"}
            className={cls({ status })}
            size={32}
          />
          <ByText type="second">{text}</ByText>
        </>
      )}

      {!tail && <ByIcon name="ToRight" className="px-1.5" size={20} />}
    </View>
  );
};
